<template>
	<div class="message">
		<div class="msgitem" v-for="i,index in messagesList" :key="index">
			<van-badge :content="i.msgCount" max="99">
        <van-image
          badge
          fit="cover"
          width="10rem"
          height="10rem"
          :src="i.from.avatar" rel="external nofollow"
          />
			</van-badge>
			<div class="cont">
				<p class="title">{{ i.from.name }}</p>
				<p class="subtitle">{{ i.content.text ? i.content.text :'图片'}}</p>
			</div>
			<div class="time">{{i.time}}</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive,computed, getCurrentInstance,watch,onMounted,onUpdated,inject} from 'vue'
	import { useStore } from 'vuex'
  import {initWebSocket,webscoketDealData} from '../../utils/websocket.js'
  import formatTime from '../../utils/time.js'
	const { proxy } = getCurrentInstance()
	const _this = proxy;
  const store = useStore();

  const socket = ref(null);
  const text = ref('')

  const messagesList = computed(() => store.state.messageList);

  
  

	onUpdated(()=>{
	})
</script>

<style lang="scss">
	.content{background: #fff;}
	.message{
		.van-badge--top-right{transform: translate(20%,-20%) !important;}
		width: 25rem;margin: 0 auto;
		.msgitem{
			display: flex;justify-content: space-between; margin-top: 1rem;background: #fff;
			.van-image {width: 4rem !important;height: 4rem !important;}
			.cont{
				width: 14rem;margin-right: 1rem;display:flex;flex-direction: column;justify-content: center;
				.title{font-size: 1rem;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;margin-bottom: 0.3rem;}
				.subtitle{font-size: 0.8333rem;color: #888;overflow:hidden; text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;}
			}
			.time{width: 4rem;font-size: 0.8333rem;text-align: center;}
		}
	}
</style>
